중첩 루프에서 항목을 표시하는 JQuery

다른 고객의 항목을 표시하고 싶습니다. 이 효과를 위해 나는 ajax 호출을 통해 데이터를 가져오고 각 고유 고객을 기반으로 데이터를 그룹화합니다. 그런 다음 그룹화 된 데이터를 내 html에 추가합니다.
내 그룹화 된 데이터의 구조는 다음과 같습니다.
"존 도우": [
{
"Item_id": 1
"Item_name": "abc"
},
{
"Item_id": 2
"Item_name": "def"
},
],
"Jane Doe":
{
"Item_id": 3
"Item_name": "ghi"
},
{
"Item_id": 4
"Item_name": "jkl"
},
]
내 코드는 다음과 같습니다.
$ .each (groupedData, function (key, value) {
$ ( '. cust_items'). append (`
`+ 키 +`

`);
$ .each (value, function (ky, val) {
$ ( '# dataTable tbody'). append (
`


 항목 번호 
 항목 이름 

 


`+ ky +`


`+ val.Item_name +`


`);
});
});
첫 번째 고객에게는 모든 항목이 표시되고 두 번째 고객에게는 데이터가 올바르게 표시되는 문제가 있습니다. 
                                
                                

                                    

                                        

                                            2021-01-31 08:23:26                                        
                                    
                                
                            


                        
                    


                    

                        

                        

                    

                    

                        

                            
속성 뒤에 쉼표가 누락되었으며 Jane Doe 속성의 개체는 []로 묶여 있지 않습니다. 구문이 올바르지 않으므로 groupedData 개체를 변경하는 것이 좋습니다.
편집 : 또한 템플릿 문자열을 조정하고 동적 ID로 테이블에 액세스합니다.
견본:
let groupedData = {
"존 도우": [{
"Item_id": 1,
"Item_name": "abc"
},
{
"Item_id": 2,
"Item_name": "def"
}
],
"Jane Doe": [{
"Item_id": 3,
"Item_name": "ghi"
},
{
"Item_id": 4,
"Item_name": "jkl"
}
]
};
$ .each (groupedData, function (key, value) {
$ ( '. cust_items'). append (`
 $ {key} 

`);
$ .each (value, function (ky, val) {
$ (`#dataTable _ $ {key.split ( '') .join ( '_')} tbody`) .append (
`


 항목 번호 
 항목 이름 

 


$ {ky}


$ {val.Item_name}


`);
});
});